import { messages } from 'share/common';
import React, { Component } from 'react';
import { Tabs } from 'antd';
import InvoiceCheck from './invoice-check';
import { connect } from 'react-redux'
import { setInvoiceManageTab } from 'actions/cache';

const { TabPane } = Tabs;

@connect(mapStateToProps)
class InvoiceManagement extends Component {
  state = {
    tabs: [
      {
        key: 'invoice-check', tab: messages('expense-3.key112')/*发票校验*/
      },
      {
        key: 'invoice-to-cost', tab: messages('expense-3.key263')/*生成费用管控*/,
      },
      {
        key: 'invoice-controls', tab: messages('expense-3.key264')/*发票字段设置*/
      }
    ],
    defaultActiveKey: this.props.invoiceManageTab || 'invoice-check'
  };

  componentWillMount() {
    const { params: { tab } } = this.props;
    if (tab !== ':tab') {
      this.setState({ defaultActiveKey: tab });
    }
  }

  handleTabChange = (key) => {
    this.props.dispatch(setInvoiceManageTab(key));
  };

  formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 15, offset: 1 } };

  render() {
    const { tabs, defaultActiveKey } = this.state;
    return (
      <Tabs
        animated={false}
        className="invoice-control-setting full-height-page"
        defaultActiveKey={defaultActiveKey}
        onChange={this.handleTabChange}
      >
        {tabs.map(item => React.createElement(TabPane, item, <InvoiceCheck tab={item.key}/>))}
      </Tabs>
    );
  }
}

function mapStateToProps(state) {
  return {
    invoiceManageTab: state.cache.invoiceManageTab
  }
}

InvoiceManagement.propTypes = {};

export default InvoiceManagement;
